<script setup lang="ts">
import { getCategoryList } from '~~/api/category'
import type { ICategoryList } from '~/types/api'

let now = $ref(0) // 鼠标悬浮选中的项
let showCategory = $ref(false) // 是否展示子分类
// 根据鼠标移入移除事件控制子分类弹窗的展示与否
const displayCategory = $computed(() => {
  return showCategory ? 'block' : 'none'
})
// // 导航的鼠标移入事件
const switchCategory = function (idx: number) {
  now = idx
  showCategory = true
}
// 课程分类接口请求
let data = $ref<ICategoryList[]>()
data = (await getCategoryList()).data.map((item) => {
  item.name = item.name.replace('&', ' | ')
  return item
})
console.log('data: ', data);

</script>

<template>
  <div class="classify-container">
    <ul relative>
      <li v-for="(item, idx) in data" :key="idx" relative @mouseenter="switchCategory(idx)"
        @mouseleave="showCategory = false">
        {{ item.name }}
        <div absolute top-0 right-3 text="#a0a0a0" text-13px>
          <caret-right-outlined />
        </div>
      </li>


      <div class="category top-0 left-160px z-10 p-6" @mouseleave="showCategory = false"
        @mouseenter="showCategory = true" rounded display-none absolute h-400px w-634px bg="#fdfdfd">
        <div class="category-content">
          <div>
            <span>基础课程</span>
            <div flex mt-2>
              <p class="ml-4 text-12px cursor-pointer"
                v-for="(item, idx) in data[now]?.subCategoryList.filter((item) => item.level === 'junior')" :key="idx">
                {{ item.name }}
              </p>
            </div>
          </div>
          <div mt-6>
            <span>进阶课程</span>
            <div flex mt-2>
              <p class="ml-4 text-12px cursor-pointer"
                v-for="(item, idx) in data[now]?.subCategoryList.filter((item) => item.level === 'middle')" :key="idx">
                {{ item.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </ul>
  </div>
</template>

<style lang="less" scoped>
.classify-container {
  width: 160px;
  height: 400px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px #d7d7d7;

  ul {
    padding: 10px 0;
    width: 100%;
  }

  li {
    width: 100%;
    height: 54px;
    cursor: pointer;
    font-size: 16px;
    line-height: 54px;
    padding-left: 19px;

    &:hover {
      color: white;
      background-color: #434b52;
    }
  }

  li:hover>* {
    color: white;
  }

  .category {
    display: v-bind(displayCategory);
    box-shadow: rgb(215, 215, 215) 0px 0px 10px;
  }
}
</style>
